<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">

    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 试试curve的api
        // 参数1和2表示椭圆中心坐标  参数3和4表示x和y方向半径
        const arc = new THREE.EllipseCurve(0, 0, 2, 1);
        
        //参数：0, 0圆弧坐标原点x，y  100：圆弧半径    0, 2 * Math.PI：圆弧起始角度
        // const arc = new THREE.ArcCurve(0, 0, 2, 0, 2 * Math.PI);

        //getPoints是基类Curve的方法，平面曲线会返回一个vector2对象作为元素组成的数组
        // const pointsArr = arc.getPoints(10); //分段数50，返回51个顶点
        // 通过.getSpacedPoints()是按照曲线长度等间距返回顶点数据，.getPoints()获取点的方式并不是按照曲线等间距的方式，而是会考虑曲线斜率变化，斜率变化快的位置返回的顶点更密集。
        const pointsArr = arc.getSpacedPoints(10); 
        
        console.log('曲线上获取坐标', pointsArr);
        // scene.add(arc)

        const geometry1 = new THREE.BufferGeometry();
        geometry1.setFromPoints(pointsArr);
        console.log('geometry.attributes',geometry1.attributes);

        // 点材质
        const material1 = new THREE.PointsMaterial({
            color: 'white',
            size: 0.2 //点对象像素尺寸
        });
        // 点模型
        const points = new THREE.Points(geometry1, material1);
        scene.add(points)


    </script>
</body>

</html>